<template>
  <view class="terminal-state">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <view class="title">
      分拨台数 <text class="color">{{ count }}台</text>
    </view>
    <scroll-view
      class="home__grid-group mt-20"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <view>
        <view
          class="u-margin-20 terminal-state__item"
          v-for="(item, index) in terminalList"
          :key="index"
        >
          <view class="u-font-15"> 终端SN：{{ item.sn }} </view>
          <view class="u-margin-top-10"> 活动：{{ item.activityName }} </view>
        </view>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      value_style: {
        color: '#9D60FF',
      },
      src: '/static/image/home/icon_scan.png',
      thumb: '/static/image/home/icon_terminal_status.png',
      pageNo: 1,
      pageSize: '10',
      terminalList: [],
      scrollTop: 0,
      status: 'loadmore',
      batchNo: '',
      count: '',
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  mounted() {
    this.batchNo = this.$route.query.batchNo;
    this.queryTerminalOperRecordDetail();
  },
  methods: {
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.queryTerminalOperRecordDetail();
    },
    queryTerminalOperRecordDetail() {
      let _that = this;
      _that.$zx.terminal_api.queryTerminalOperRecordDetail(this.pageNo, this.pageSize, this.batchNo).then((data) => {
          _that.count = data.length;
          _that.terminalList = _that.terminalList.concat(data);
          console.log('queryTerminalOperRecordDetail----->70', data);
          if (data.length !== 0) {
            this.status = 'loadmore';
            this.pageNo += 1;
          } else {
            this.status = 'nomore';
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.terminal-state {
  &__header {
    padding: 20rpx;
    background-color: white;
  }

  &__item {
    background-color: white;
    border-radius: 20rpx;
    margin-top: 20rpx;
    padding: 20rpx;
  }
}

.color {
  color: #9d60ff;
}

.title {
  height: 80rpx;
  line-height: 80rpx;
  padding: 20rpx;
}
</style>
